import 'package:flutter/material.dart';
import '../const.dart';

class IndexBar extends StatefulWidget {
  //回调，给外界用
  final void Function(String str)? indexBarCallBack;
  //初始化的时候付值
  IndexBar({
    this.indexBarCallBack,
  });

  @override
  State<IndexBar> createState() => _IndexBarState();
}

class _IndexBarState extends State<IndexBar> {
  Color _bkColor = Color.fromRGBO(1, 1, 1, 0.0);
  Color _textColor = Colors.black;

  double _indicatorY = 0.0;
  String _indicatorText = 'A';
  bool _indicatorHidden = true;


  // 方法
  int getIndex(BuildContext context, Offset globalPosition){

    //拿到box
    RenderBox box = context.findRenderObject() as RenderBox;//报错强指定类型as RenderBox
    //拿到y值
    double y = box.globalToLocal(globalPosition).dy;
    //每个控件高度
    double itemHeoght = ScreenHeight(context)/2/INDEX_WORDS.length;
    //算出index 值，取整.给取值范围
    int index = (y ~/ itemHeoght).clamp(0, INDEX_WORDS.length-1);
    // print('现在拖拽了${details.globalPosition}');
    print('现在选中 ${INDEX_WORDS[index]}');
    return index;
  }


  @override
  Widget build(BuildContext context) {
    //索引
    List<Widget> words = [];
    for(int i = 0; i< INDEX_WORDS.length; i++){
      words.add(
          Expanded(
            child: Text(INDEX_WORDS[i],style: TextStyle(fontSize: 10,color: _textColor),
            ),
          ));
    }
    
    return Container(
      //悬浮检索控件
      child: Positioned(
          height: ScreenHeight(context)/2,
          top: ScreenHeight(context)/8,
          right: 0.0,
          width: 120,
        child: Row(children: [
          Container(
            width: 100,
            alignment: Alignment(0,_indicatorY),
            // color: Colors.red,

            child: _indicatorHidden?null:Stack(
              alignment: Alignment(-0.2,0),
              children: [
                Image(image: AssetImage('images/气泡.png'),width: 60,),
                Text(_indicatorText,style: TextStyle(fontSize: 25,color: Colors.white),),
              ],
            ),
          ),
          GestureDetector(
            child: Container(
              width: 20,
              color: _bkColor,
              child: Column(
                children: words
          ),
        ),
        onVerticalDragUpdate: (DragUpdateDetails details){
              int index = getIndex(context, details.globalPosition);
              setState((){
                _indicatorText = INDEX_WORDS[index];
                _indicatorY = 2.2/28*index - 1.1;
                _indicatorHidden = false;
              });
              //回调给外部
              widget.indexBarCallBack!(INDEX_WORDS[index]);
        },
        //回调
        onVerticalDragDown: (DragDownDetails details){
          int index = getIndex(context, details.globalPosition);
          setState((){
            _indicatorText = INDEX_WORDS[index];
            _indicatorY = 2.2/28*index - 1.1;
            _indicatorHidden = false;
          });
          //回调给外部
          widget.indexBarCallBack!(INDEX_WORDS[index]);
          //屏幕中的位置
          // print('现在点击了${details.globalPosition}');
          setState((){
            _bkColor = Color.fromRGBO(1, 1, 1, 0.5);
            _textColor = Colors.white;
          });
        },
        onVerticalDragEnd: (DragEndDetails details){
          // print('现在抬起了${details.globalPosition}');
          setState((){
            _bkColor = Color.fromRGBO(1, 1, 1, 0.0);
            _textColor = Colors.black;
            _indicatorHidden = true;
          });
        },
      ),
      ],),
    ),
    );
  }
}

const INDEX_WORDS = [
  '🔍',
  '☆',
  'A',
  'B',
  'C',
  'D',
  'E',
  'F',
  'G',
  'H',
  'I',
  'J',
  'K',
  'L',
  'M',
  'N',
  'O',
  'P',
  'Q',
  'R',
  'S',
  'T',
  'U',
  'V',
  'W',
  'X',
  'Y',
  'Z'
];